<template>
	<view class="uv-tabbar">
		<view class="uv-tabbar__content" ref="uv-tabbar__content" @touchmove.stop.prevent="noop"
			:class="[border && 'uv-border-top', fixed && 'uv-tabbar--fixed']" :style="[tabbarStyle]">
			<view class="uv-tabbar__content__item-wrapper">
				<uv-tabbar-item :text="item.name" v-for="(item,index) in alllist" :key="index" @click="gojump(item)">
					<template v-slot:active-icon>
						<image class="icon" :src="item.aicon"></image>
					</template>
					<template v-slot:inactive-icon>
						<image class="icon" :src="item.iicon"></image>
					</template>
				</uv-tabbar-item>
			</view>

			<uv-safe-bottom v-if="safeAreaInsetBottom"></uv-safe-bottom>
		</view>
		<view class="uv-tabbar__placeholder" v-if="placeholder" :style="{
				height: placeholderHeight + 'px',
			}"></view>
	</view>
</template>

<script>
	import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
	import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
	import props from './props.js';
	// #ifdef APP-NVUE
	const dom = uni.requireNativePlugin('dom')
	// #endif
	/**
	 * Tabbar 底部导航栏
	 * @description 此组件提供了自定义tabbar的能力。
	 * @tutorial https://www.uvui.cn/components/tabbar.html
	 * @property {String | Number}	value				当前匹配项的name
	 * @property {Boolean}			safeAreaInsetBottom	是否为iPhoneX留出底部安全距离（默认 true ）
	 * @property {Boolean}			border				是否显示上方边框（默认 true ）
	 * @property {String | Number}	zIndex				元素层级z-index（默认 1 ）
	 * @property {String}			activeColor			选中标签的颜色（默认 '#1989fa' ）
	 * @property {String}			inactiveColor		未选中标签的颜色（默认 '#7d7e80' ）
	 * @property {Boolean}			fixed				是否固定在底部（默认 true ）
	 * @property {Boolean}			placeholder			fixed定位固定在底部时，是否生成一个等高元素防止塌陷（默认 true ）
	 * @property {Object}			customStyle			定义需要用到的外部样式
	 * 
	 * @example <uv-tabbar :value="value2" :placeholder="false" @change="name => value2 = name" :fixed="false" :safeAreaInsetBottom="false"><uv-tabbar-item text="首页" icon="home" dot ></uv-tabbar-item></uv-tabbar>
	 */
	export default {
		name: 'uv-tabbar',
		mixins: [mpMixin, mixin, props],
		data() {
			return {
				tabbarname: uni.getStorageSync('name'),
				placeholderHeight: 0,
				alllist: [
					{
					  "path": "/pages/index/index",
					  "name": "店铺",
					  "iicon": "/static/tabbar/index.png",
					  "aicon": "/static/tabbar/indexact.png"
					},
					{
					  "path": "/pages/shop/shop",
					  "name": "商品",
					  "iicon": "/static/tabbar/fj.png",
					  "aicon": "/static/tabbar/fjact.png"
					},
					{
					  "path": "/pages/order/order",
					  "name": "订单",
					  "iicon": "/static/tabbar/order.png",
					  "aicon": "/static/tabbar/orderact.png"
					},
					{
					  "path": "/pages/user/user",
					  "name": "我的",
					  "iicon": "/static/tabbar/user.png",
					  "aicon": "/static/tabbar/useract.png"
					}
				]
			}
		},
		computed: {

			tabbarStyle() {
				const style = {
					zIndex: this.zIndex
				}
				// 合并来自父组件的customStyle样式
				return this.$uv.deepMerge(style, this.$uv.addStyle(this.customStyle))
			},
			// 监听多个参数的变化，通过在computed执行对应的操作
			updateChild() {
				return [this.value, this.activeColor, this.inactiveColor]
			},
			updatePlaceholder() {
				return [this.fixed, this.placeholder]
			}
		},
		watch: {
			updateChild() {
				// 如果updateChildren中的元素发生了变化，则执行子元素初始化操作
				this.updateChildren()
			},
			updatePlaceholder() {
				// 如果fixed，placeholder等参数发生变化，重新计算占位元素的高度
				this.setPlaceholderHeight()
			}
		},
		created() {
			this.children = []
		},
		mounted() {
			this.setPlaceholderHeight()
		},
		methods: {
			gojump(i) {
				uni.switchTab({
					url:i.path
				})
			},

			updateChildren() {
				// 如果存在子元素，则执行子元素的updateFromParent进行更新数据
				this.children.length && this.children.map(child => child.updateFromParent())
			},
			// 设置用于防止塌陷元素的高度
			async setPlaceholderHeight() {
				// if (!this.fixed || !this.placeholder) return
				// 延时一定时间
				await this.$uv.sleep(20)
				// #ifndef APP-NVUE
				this.$uvGetRect('.uv-tabbar__content').then(({
					height = 50
				}) => {
					// 修复IOS safearea bottom 未填充高度
					this.placeholderHeight = height
					uni.setStorageSync('height',this.placeholderHeight)
				})
				// #endif

				// #ifdef APP-NVUE
				dom.getComponentRect(this.$refs['uv-tabbar__content'], (res) => {
					const {
						size
					} = res
					this.placeholderHeight = size.height
				})
				// #endif
			}
		}
	}
</script>

<style lang="scss" scoped>

	@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';
	@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
	@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';

	.uv-tabbar {
		@include flex(column);
		flex: 1;
		justify-content: center;

		&__content {
			@include flex(column);
			background-color: #fff;
		    box-shadow: 0rpx 1rpx 10rpx 0rpx rgba(0,0,0,0.2);
			border-radius: 20rpx;
			&__item-wrapper {
				height: 50px;
				@include flex(row);
			}
		}

		&--fixed {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
		}

		.uv-tabbar__content__item-wrapper {
			.icon {
				width: 50rpx;
				height: 50rpx;
			}

		}
	}
</style>